<script setup lang="ts">
import { residentNatureList, type User } from '@/model/user'
import { ref, type Ref } from 'vue'

// 控制弹窗显示与隐藏
const isDialogVisible = ref(false)

// 业主关系选项
const relationshipOptions = ref(residentNatureList)

// 表单默认值
const defaultForm: User = {
  uid: 0,
  realname: '',
  phone: '',
  gender: 0,
  building: '',
  room: '',
  residentNature: '其他',
  role: 1,
}

// 表单数据
const formData: Ref<User> = ref(defaultForm)

// 提交表单
const handleSubmit = () => {
  // 这里可以添加表单验证逻辑
  console.log('表单提交数据:', formData.value)
  // 提交成功后关闭弹窗
  isDialogVisible.value = false
  // 重置表单
  formData.value = defaultForm
}
</script>

<template>
  <div class="app-container">
    <!-- 中间内容区：为标题和副标题添加动画类 fade-in -->
    <p class="title fade-in">
      智慧门禁 <br />
      开启便捷安全新体验<br />
    </p>

    <p class="sec_title fade-in">
      智慧门禁系统，融合前沿科技，为您打造<strong>安全、高效、智能</strong>
      的出入管理方案。告别传统门禁的繁琐与局限，通过智能识别技术，无论是人脸识别、刷卡还是手机扫码，
      都能快速精准识别，让通行更顺畅。<br />
      同时，系统可实时记录出入信息，生成<strong>详细的出入记录报表，</strong>
      方便您随时查询与管理，为场所安全加上多重保障。更有更有完善的门禁使用指南，助您
      <strong>轻松上手</strong>，<br />
      畅享智慧门禁带来的便捷与安心。
    </p>

    <!-- 底部按钮 -->
    <div class="btn-container fade-in">
      <button class="btn" @click="isDialogVisible = true">权限申请</button>
      <button class="btn">查看个人信息</button>
    </div>

    <!-- 权限申请弹窗 -->
    <div class="dialog-overlay" v-if="isDialogVisible" @click="isDialogVisible = false">
      <div class="dialog-container" @click.stop>
        <h3 class="dialog-title">权限申请</h3>
        <div class="dialog-content">
          <form class="apply-form">
            <div class="form-item">
              <label>姓名：</label>
              <input type="text" v-model="formData.realname" required />
            </div>
            <div class="form-item">
              <label>电话号码：</label>
              <input type="tel" v-model="formData.phone" required />
            </div>
            <div class="form-item">
              <label>楼栋房间号：</label>
              <input type="text" v-model="formData.room" required />
            </div>
            <div class="form-item">
              <label>与业主关系：</label>
              <select v-model="formData.residentNature" required>
                <option value="" disabled>请选择</option>
                <option v-for="option in relationshipOptions" :key="option" :value="option">
                  {{ option }}
                </option>
              </select>
            </div>
          </form>
        </div>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="isDialogVisible = false">取消</button>
          <button class="submit-btn" @click="handleSubmit">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 1. 添加渐显动画关键帧：从透明、下方10px位置，过渡到完全显示 */
@keyframes fadeIn {
  from {
    opacity: 0; /* 初始状态：完全透明 */
    transform: translateY(10px); /* 初始状态：向下偏移10px */
  }
  to {
    opacity: 1; /* 结束状态：完全不透明 */
    transform: translateY(0); /* 结束状态：回到原位置 */
  }
}

/* 2. 定义动画类：绑定关键帧，设置过渡时长和延迟 */
.fade-in {
  animation: fadeIn 1s ease-out forwards; /* 1秒动画，缓出效果，保持结束状态 */
  opacity: 0; /* 初始隐藏，避免动画前闪现 */
}

/* 3. 为副标题添加轻微延迟，让动画更有层次感 */
.sec_title.fade-in {
  animation-delay: 0.3s; /* 比标题晚0.3秒开始动画 */
}

/* 4. 底部按钮动画延迟 */
.btn-container.fade-in {
  animation-delay: 0.6s; /* 延迟0.6秒开始动画 */
}

/* 原有样式保持不变 */
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  margin-top: 140px;
}

.title {
  font-size: 65px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: center;
  user-select: none; /* 禁止选中文本 */
}

.sec_title {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.8;
  max-width: 800px; /* 限制宽度提升阅读体验 */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  user-select: none; /* 禁止选中文本 */
}

.btn-container {
  display: flex;
  gap: 20px; /* 按钮间距 */
  justify-content: center;
  flex-wrap: wrap; /* 响应式换行 */
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #000000; /* 主色调，可替换 */
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none; /* 清除链接下划线 */
  transition: background-color 0.3s; /*  hover过渡效果 */
  cursor: pointer; /* 鼠标手势 */
  border: none;
}

.btn:hover {
  background-color: #333;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-container {
  background-color: #fff;
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  margin: 0;
  color: #007bff;
}

.dialog-content {
  padding: 20px;
}

.apply-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-item label {
  font-size: 14px;
  color: #333;
}

.form-item input,
.form-item select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-item input:required:focus:invalid,
.form-item select:required:focus:invalid {
  border-color: #007bff;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid #eee;
}

.cancel-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn:hover {
  background-color: #f5f5f5;
}

.submit-btn {
  padding: 8px 16px;
  background-color: #5092d8;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover {
  background-color: #007bff;
}

/* 适配小屏幕 */
@media (max-width: 768px) {
  .title {
    font-size: 24px;
  }

  .sec_title {
    font-size: 14px;
    padding: 0 10px;
  }

  .btn {
    padding: 10px 24px;
    font-size: 14px;
  }

  .dialog-container {
    width: 95%;
  }
}
</style>
